<template>
  <div class="main_box" style="padding:10px;">
    <div class="detail_wrap">
      <div class="tit">
        <h2>基础信息</h2>
        <el-button size="small" plain type="success" icon="fa fa-mail-forward" @click="returnList" > 返 回</el-button>
      </div>
      <div class="con">
        <ul>
          <li>
            <label class="label">预约编号:</label>
            <span>{{appointData.appointCode}}</span>
          </li>
          <li>
            <label class="label">预约项目:</label>
            <span>{{appointData.itemName}}</span>
          </li>
          <li>
            <label class="label">项目价格:</label>
            <span>{{appointData.itemPrice}}</span>
          </li>
          <li>
            <label class="label">预约日期:</label>
            <span>{{formatDate(appointData.appointDate)}}</span>
          </li>
          <li>
            <label class="label">预约时间段:</label>
            <span>{{appointData.appointTime}}</span>
          </li>
          <li>
            <label class="label">预约状态:</label>
            <span>{{formatAppointState(appointData.appointState)}}</span>
          </li>
          <li>
            <label class="label">预约完成时间:</label>
            <span>{{appointData.appointEndTime}}</span>
          </li>
          <li>
            <label class="label">预约备注:</label>
            <span>{{appointData.remark}}</span>
          </li>
        </ul>
      </div>

      <div class="tit">
        <h2>患者信息</h2>
      </div>
      <div class="con">
        <ul>
          <li>
            <label class="label">患者姓名:</label>
            <span>{{appointData.patientName}}</span>
          </li>
          <li>
            <label class="label">患者性别:</label>
            <span v-if="appointData.patientSex == 1">男</span>
            <span v-else-if="appointData.patientSex == 2">女</span>
          </li>
          <li>
            <label class="label">患者年龄:</label>
            <span>{{appointData.patientAge}}</span>
          </li>
          <li>
            <label class="label">患者电话:</label>
            <span>{{appointData.patientPhone}}</span>
          </li>
          <li>
            <label class="label">患者身份证:</label>
            <span>{{appointData.patientCard}}</span>
          </li>
          <li>
            <label class="label">患者病史:</label>
            <span>{{appointData.patientInfo}}</span>
          </li>
          <li>
            <label class="label">初步诊断:</label>
            <span>{{appointData.examineMsg}}</span>
          </li>
        </ul>
      </div>

      <div class="tit" v-if="payFiles.length > 0">
        <h2>支付凭证</h2>
      </div>
      <!--<div class="con" v-if="payFiles.length > 0">
        <div v-for="file in payFiles" :key="file">
          <el-image style="height: 800px;width:800px" :src="file"></el-image>
        </div>
      </div>-->
      <div>
        <ul>
          <li v-for="(img, index) in payFiles" :key="index" ><img :src="img" style="height: 1200px;width:1000px"> </li>
        </ul>
      </div>


    </div>
  </div>
</template>

<script>
import Map from "@/components/Map";
import AppointApi from "@/api/appoint/appoint";
export default {
  data() {
    return {
      appointData: "",
      payFiles: []
    };
  },
  components: {
    Map
  },
  beforeRouteLeave(to,from,next){
    to.meta.keepAlive = true
    next()
  },
  methods: {
    getData() {
      AppointApi.getAppointInfo({
        appointId: this.$route.query.id
      }).then(res => {
        this.appointData = res.data;
      });

      AppointApi.getFilesByAppointId({
        id: this.$route.query.id
      }).then(res => {
        if (res.data){
          this.payFiles = res.data.split(",");
        }
      });

    },
    formatDate(value) {
      return this.$Utils.formatDate(value, "yyyy-MM-dd");
    },
    formatAppointState (cellValue) {
      if (cellValue === 1) {
        return '预约中'
      } else if (cellValue === 10) {
        return '协商中'
      }else if (cellValue === 10) {
        return '协商中'
      } else if (cellValue === 15) {
        return '审核通过'
      } else if (cellValue === 20) {
        return '预约成功'
      }else if (cellValue === 30) {
        return '已取消'
      }else if (cellValue === 40) {
        return '待确认取消'
      }else if (cellValue === 50) {
        return '待确认修改'
      }else if (cellValue === 60) {
        return '已上传结果'
      }
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path: "/appoint/appointManagement" });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>
<style lang="scss" src="@/assets/css/views/Detail.scss" scope>
</style>
